<template>
  <div>
    <input type="file" @change="readKMZFile">
    <div v-if="kmlData">
      <!-- 显示解析后的KML数据 -->
      <pre>{{ kmlData }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kmlData: null
    }
  },
  methods: {
    readKMZFile(event) {
      const file = event.target.files[0]
      if (!file) {
        return
      }
     
      const reader = new FileReader()
      reader.onload = (e) => {
        const arrayBuffer = e.target.result
        console.log('11111111111', arrayBuffer)
        this.parseKMZ(arrayBuffer)
      }
      console.log(file)
      reader.readAsArrayBuffer(file)
    },
    getFile(){
    //  const reader = new FileReader()
    //   reader.onload = (e) => {
    //     const arrayBuffer = e.target.result
    //     this.parseKMZ(arrayBuffer)
    //   }
    //   reader.readAsArrayBuffer(require('@/utils/test.kmz'))
    },
    parseKMZ(arrayBuffer) {
      // const jszip = require('jszip') // 引入jszip库
      const JSZip = require('jszip')
      const zip = new JSZip()
      zip
        .loadAsync(arrayBuffer)
        .then(async(zip) => {
           console.log(zip)
          const kmlFile = zip.file(/.*\.kml$/) // 正则匹配KMZ中的KML文件
         console.log(kmlFile)
          if (kmlFile) {
            const kmlContent = await kmlFile[0].async('string') // 读取KML文件内容
            this.parseKML(kmlContent) // 解析KML数据
          }
        })
        .catch((err) => {
          console.error('Error parsing KMZ:', err)
        })
    },
    parseKML(kmlContent) {
      // 这里可以使用第三方库如`kml-dom-parser`来解析KML数据
      // 示例中仅将KML数据作为字符串展示，实际应用中需要进一步处理
      this.kmlData = kmlContent
    }
  },
  mounted(){
    this.getFile()
  }
}
</script>
